<template>
  <div class="heade">
    <div v-if="id === '1'" style="overflow-x: auto">
      <div class="title">
        <div class="tex" />
        <span class="text">配置指引</span>
        <span class="text1">完成以下几步，轻松掌握结算关系配置与报价</span>
        <span class="text2">收起</span>
        <i style="color: #2087d0; margin-left: 7px" class="el-icon-arrow-up" />
      </div>
      <div style="display: flex">
        <div class="title1">
          <div class="img">
            <img src="@/static/image/1.png" alt>
          </div>
          <div class="text3">
            <div class="text4">点击“新增结算关系”按钮</div>
            <div class="text5">如已配置结算关系</div>
          </div>
        </div>
        <div class="title1 tit">
          <div class="img">
            <img src="@/static/image/2.png" alt>
          </div>
          <div class="text3">
            <div class="text4">点击“新增结算关系”按钮</div>
            <div class="text5">如已配置结算关系</div>
          </div>
        </div>
        <div class="title1 tit">
          <div class="img">
            <img src="@/static/image/3.png" alt>
          </div>
          <div class="text3">
            <div class="text4">点击“新增结算关系”按钮</div>
            <div class="text5">如已配置结算关系</div>
          </div>
        </div>
        <div class="title1 tit">
          <div class="img">
            <img src="@/static/image/4.png" alt>
          </div>
          <div class="text3">
            <div class="text4">点击“新增结算关系”按钮</div>
            <div class="text5">如已配置结算关系</div>
          </div>
        </div>
      </div>
      <div class="title2">
        <div class="text6">
          <div class="text7">结算关系配置</div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-sort"
            >批量导入结算关系</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addGx"
            >新增结算关系</el-button>
          </div>
        </div>
        <div class="line" />
        <el-form ref="form" :model="form" label-width="100px">
          <div style="display: flex" class="title3">
            <el-form-item label="使用网点" prop="networkNameId">
              <el-select
                v-model="form.networkNameId"
                class="input"
                placeholder="请选择网点"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="结算主体类型" prop="typeName">
              <el-select
                v-model="form.typeName"
                class="input"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in typelist"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="结算主体" prop="networkName">
              <el-input v-model="form.networkName" />
            </el-form-item>
            <el-form-item label="结算对象类型" prop="objectType">
              <el-select
                v-model="form.objectType"
                class="input"
                placeholder="请选择"
              >
                <el-option
                  v-for="(n, i) in objectTypeList"
                  :key="i"
                  :label="n.label"
                  :value="n.label"
                />
              </el-select>
            </el-form-item>
            <div style="margin-right: 32px">
              <el-button
                class="btt"
                style="margin-right: 14px; color: #fff"
                @click="seach"
              >查询</el-button>
              <el-button
                class="btt btt1"
                style="background-color: #fff; border: 1px #333333 solid"
                @click="clear"
              >重置</el-button>
            </div>
          </div>
          <div
            style="display: flex; justify-content: flex-start"
            class="title3"
          >
            <el-form-item label="结算对象" prop="clientId">
              <el-select
                v-model="form.clientId"
                class="input"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in clientList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="结算对象编号"
              style="margin-left: 52px"
              prop="objectCodes"
            >
              <el-input
                v-model="form.objectCodes"
                placeholder="最多输入1000条,用逗号隔开"
                style="width: 285px"
              />
            </el-form-item>
          </div>
        </el-form>
        <div class="title4">
          <div class="text8">当前页共{{ tableData.length }}项</div>
          <el-button class="bt">批量关联报价</el-button>
          <el-button
            class="bt1"
            style="width: 120px; background: #2087d0; border-radius: 4px"
          >批量删除</el-button>
          <el-button
            class="bt1"
            style="
              width: 80px;
              height: 42px;
              background: #2087d0;
              border-radius: 4px;
            "
          >导出</el-button>
          <el-button
            class="bt1"
            style="
              width: 220px;
              height: 42px;
              background: #2087d0;
              border-radius: 4px;
            "
          >导出无结算对象客户</el-button>
        </div>
        <elltable
          ref="multipleTable"
          :loading="loading"
          :data="tableData"
          :th="th"
          :n="3"
        >
          <template v-slot:after-columns>
            <el-table-column
              v-if="tableData.length > 0"
              fixed="right"
              label="操作"
              width="500"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleOpen"
                >查看报价</el-button>
                <el-button type="text" size="small">查看客户</el-button>
                <el-button type="text" size="small">个性化计泡</el-button>
                <el-button type="text" size="small">个性化结算重量</el-button>
                <el-button type="text" size="small">修改日志</el-button>
              </template>
            </el-table-column>
          </template>
        </elltable>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="form.pageDate.pageNum"
            :page-size="form.pageDate.pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        size="50%"
        :direction="direction"
        :before-close="handleClose"
      >
        <div v-show="type == 1" class="box">
          <div class="header">
            <div>
              <span>辽宁盘锦公司(结算主体)</span>
              <i class="el-icon-connection" />
              <span>大洼区兰歌小铺的小店(结算对象)</span>
            </div>
            <el-button
              class="sc"
              style="width: 140px"
              @click="addbj"
            >添加报价</el-button>
          </div>
          <div class="footer">
            <el-tabs v-model="activeName">
              <el-tab-pane label="中转费" name="first">
                <el-row>
                  <el-col :span="24">
                    <el-form
                      ref="form"
                      :model="form"
                      label-width="80px"
                      class="flex"
                    >
                      <el-form-item label="报价名称">
                        <el-input v-model="form.name" />
                      </el-form-item>
                      <el-form-item label="活动区域">
                        <el-select
                          v-model="form.region"
                          placeholder="请选择活动区域"
                        >
                          <el-option label="区域一" value="shanghai" />
                          <el-option label="区域二" value="beijing" />
                        </el-select>
                      </el-form-item>
                      <el-button class="sc" style="width: 70px">查询</el-button>
                    </el-form>
                  </el-col>
                  <el-col>
                    <div class="title4" style="margin-bottom: 20px">
                      <div
                        class="text8"
                        style="color: #ccc; font-weight: normal"
                      >
                        当前页共10项
                      </div>
                      <el-button
                        class="bt1"
                        style="
                          width: 120px;
                          height: 42px;
                          background: #2087d0;
                          border-radius: 4px;
                        "
                      >批量删除</el-button>
                    </div>
                  </el-col>
                  <el-table
                    ref="multipleTable"
                    border
                    :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                  >
                    <el-table-column type="selection" width="120" />
                    <el-table-column label="序号" width="120">
                      <template slot-scope="scope">{{
                        scope.row.date
                      }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="networkName"
                      label="报价名称"
                      width="120"
                    />
                    <el-table-column
                      prop="siteCode"
                      label="使用状态"
                      width="120"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="typeName"
                      label="优先级"
                      width="120"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="name"
                      label="生效时间段"
                      width="120"
                      show-overflow-tooltip
                    />
                  </el-table>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="加收费" name="second">配置管理</el-tab-pane>
              <el-tab-pane label="包仓费" name="third">角色管理</el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div v-show="type == 0" class="box">
          <div>
            <div class="h-h">
              <span>辽宁盘锦公司(结算主体)</span>
              <i class="el-icon-connection" />
              <span>大洼区兰歌小铺的小店(结算对象)</span>
            </div>
            <div class="h-f">
              <span>若没有可选的报价信息,可跳转至报价中心新增报价</span>
              <span>报价中心</span>
            </div>
          </div>
        </div>
      </el-drawer>
      <el-drawer
        style="height: 1355px"
        title="新增结算关系"
        size="78%"
        :visible.sync="drawer1"
        :direction="direction"
        :before-close="handleClose"
        wrapper-class-name="my-drawer"
      >
        <div class="title5">
          <el-row>
            <el-col class="title6" :span="24">
              <div class="text">
                <div class="text1">
                  结算主体与结算对象的关系是唯一的，请勿重复创建;
                  若搜索不到主体与对象，可至员工资料新增
                </div>
                <button class="text2" @click="employee">员工资料</button>
              </div>
            </el-col>
          </el-row>
          <el-row style="background-color: #fff; padding: 0 30px">
            <el-col :span="12">
              <div class="title7">
                <div class="text">结算主题</div>
                <div class="text1">
                  <div>
                    <div class="text2">辽宁盘锦公司</div>
                    <div class="text3">独立网点</div>
                  </div>
                  <div class="text4">
                    <i color="#F4B259" class="el-icon-circle-plus" />
                    重新选择
                  </div>
                </div>
              </div>
              <div style="margin-top: 24px">
                <el-select
                  v-model="value"
                  style="width: 132px; height: 36px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="value"
                  style="width: 242px; height: 36px; margin-left: 12px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-button class="bttt">确定</el-button>
              </div>
              <div class="title8">
                添加结算关系的报价
                <span class="text">(可跳过)</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title7">
                <div class="text">结算对象</div>
                <div class="text1">
                  <div>
                    <div class="text2">点击按钮选择结算对象</div>
                    <div class="text3">若无可选对象请至员工资料新增</div>
                  </div>
                  <div class="text4">
                    <i color="#F4B259" class="el-icon-circle-plus" />
                    点击选择
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="background-color: #fff" :span="24">
              <div class="title9">
                <div class="line" />
                <el-row>
                  <el-col class="title10" :span="12">
                    <div>
                      <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="中转费报价" name="first">
                          <div class="title11">
                            <div class="title12">
                              <el-form
                                ref="form"
                                style="
                                  display: flex;
                                  justify-content: space-between;
                                "
                                :model="form"
                                label-width="80px"
                              >
                                <div style="display: flex">
                                  <el-form-item label="活动名称">
                                    <el-input
                                      v-model="form1.name"
                                      class="input"
                                    />
                                  </el-form-item>
                                  <el-form-item label="活动区域">
                                    <el-select
                                      v-model="form1.region"
                                      class="input"
                                      placeholder="请选择活动区域"
                                    >
                                      <el-option
                                        label="区域一"
                                        value="shanghai"
                                      />
                                      <el-option
                                        label="区域二"
                                        value="beijing"
                                      />
                                    </el-select>
                                  </el-form-item>
                                </div>
                                <el-form-item>
                                  <el-button class="bt">查询</el-button>
                                </el-form-item>
                              </el-form>
                            </div>
                            <div class="title13">
                              <el-table
                                ref="multipleTable"
                                :header-cell-style="{ background: '#f6f6f6' }"
                                :data="tableData1"
                                tooltip-effect="dark"
                                style="width: 100%"
                                border
                                @selection-change="handleSelectionChange"
                              >
                                <el-table-column
                                  type="selection"
                                  width="55"
                                  align="center"
                                />
                                <el-table-column
                                  label="报价名称"
                                  width="120"
                                  align="center"
                                >
                                  <template slot-scope="scope">{{
                                    scope.row.date
                                  }}</template>
                                </el-table-column>
                                <el-table-column
                                  prop="name"
                                  label="使用状态"
                                  width="120"
                                  align="center"
                                />
                                <el-table-column
                                  prop="address"
                                  label="优先级"
                                  show-overflow-tooltip
                                  align="center"
                                />
                                <el-table-column
                                  prop="address"
                                  label="生效时间段"
                                  show-overflow-tooltip
                                  align="center"
                                />
                              </el-table>
                              <div
                                style="
                                  display: flex;
                                  justify-content: space-between;
                                  margin-top: 42px;
                                "
                              >
                                <div class="title22">显示2到2，共2记录</div>
                                <div
                                  class="block"
                                  style="
                                    display: flex;
                                    justify-content: flex-end;
                                  "
                                >
                                  <el-pagination
                                    background
                                    :current-page="currentPage4"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="10"
                                    layout="prev, pager, next"
                                    :total="khTotal"
                                    prev-text="上一页"
                                    next-text="下一页"
                                    @size-change="khHandleSizeChange"
                                    @current-change="khHandleCurrentChange"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane
                          label="派费"
                          name="second"
                        >派费</el-tab-pane>
                        <el-tab-pane
                          label="加收费"
                          name="third"
                        >加收费</el-tab-pane>
                        <el-tab-pane
                          label="包仓费"
                          name="fourth"
                        >包仓费</el-tab-pane>
                      </el-tabs>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="title14">
                      <div class="text">已选报价0</div>
                      <div class="line1" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-drawer>
    </div>
    <employee v-if="id === '2'" style="width: 100%" @bt="mes" />
  </div>
</template>

<script>
import {
  // getRelationshipList,
  getOutletsList,
  getFinanceList,
  relationshipSearch
} from '@/api/dashboard'
import employee from '@/views/branchFinance/basicConfiguration/employee'
export default {
  name: 'Dashboard',

  components: {
    employee
  },
  data() {
    return {
      // rules: {
      //   networkNameId: '', // 使用网点
      //   typeName: '', // 结算主题类型
      //   networkName: '', // 结算主题
      //   objectType: '', // 结算对象类型
      //   clientId: '', // 结算对象
      //   objectCodes: '', // 结算对象编号
      //   pageDate: {
      //     pageNum: 1,
      //     pageSize: 10
      //   }
      // },

      // 结算对象类型
      objectTypeList: [
        { value: 0, label: '二级网点' },
        { value: 1, label: '业务员' },
        { value: 2, label: '客户' }

      ],
      // 结算主体类型
      typelist: [
        { value: 0, label: '独立网点' },
        { value: 1, label: '二级网点' },
        { value: 2, label: '业务员' }

      ],
      loading: false,
      id: '1',
      activeName: 'second',
      tableData1: [],
      form1: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form: {
        networkNameId: '', // 使用网点
        typeName: '', // 结算主题类型
        networkName: '', // 结算主题
        objectType: '', // 结算对象类型
        clientId: '', // 结算对象
        objectCodes: '', // 结算对象编号
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      drawer: false,
      drawer1: false,
      direction: 'rtl',

      type: 0,
      title: '查看报价',
      // activeName: 'first',
      total: 0,
      // 网点列表
      networkList: [],
      // 结算主题类型列表
      typeList: [],
      // 结算主题列表
      networkNameList: [],
      // 结算对象列表
      clientList: [],

      currentPage4: 1,
      // 中转费
      transitFees: [],
      // 加收费
      additionalCharges: [],
      // 包仓费
      warehouseFee: [],
      th: [],
      tableData: [],
      options: [],
      value: '',
      khTotal: 0
    }
  },
  created() {
    this.getOutLet()
    this.getFinance()
  },
  methods: {
    khHandleCurrentChange() { },
    khHandleSizeChange() { },
    handleSelectionChange() { },
    handleClick() { },
    mes(ids) {
      this.id = ids
    },
    // 点击员工资料
    employee() {
      this.id = '2'
    },
    // 开启抽屉
    handleOpen() {
      this.drawer = !this.drawer
      this.type = 1
      this.title = '查看报价'
    },
    // 关闭抽屉
    handleClose(done) {
      this.drawer = false
      done()
    },
    // 打开添加报价抽屉
    addbj() {
      this.title = '添加报价'
      this.type = 0
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 获取结算对象列表
    getFinance() {
      getFinanceList().then((res) => {
        // console.log('结算对象列表', res)
        if (res.code === 200) {
          this.clientList = res.data
        }
      })
    },
    addGx() {
      this.drawer1 = !this.drawer1
    },
    // 查询
    seach() {
      this.loading = true
      relationshipSearch(this.form).then((res) => {
        console.log('查询', res)
        if (res.code === 200) {
          this.tableData = res.data.list.data
          this.total = res.data.list.total
          this.th = res.data.fields
        } else {
          this.tableData = []
          this.total = 0
        }
      })
      this.loading = false
    },

    // 重置
    clear() {
      this.$refs.form.resetFields()
      // for (const key in this.form) {
      //   if (this.form[key] !== 'pageDate') {
      //     this.form[key] = ''
      //   }
      // }
      // this.form.pageDate = {
      //   pageNum: 1,
      //   pageSize: 10
      // }
      this.tableData = []
      this.total = 0
    },

    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.seach()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.seach()
    }
  }
}
</script>

<style lang="scss" scoped>
.heade {
  background-color: #f5f5f5;
  padding-top: 26px;
}
.title {
  margin-left: 32px;

  .tex {
    background: linear-gradient(-24deg, #e7f3fb, #8dc0e4, #2087d0);
  }

  .text {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }

  .text1 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 22px;
  }

  .text2 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2087d0;
    margin-left: 16px;
  }
}

.box {
  margin: 20px;
  border-radius: 30px;
  background-color: rgb(245, 240, 240);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  .footer {
    padding: 20px;
  }
}

.sc {
  height: 40px;
  background-color: #2087d0;
  border: none;
  border-radius: 5px;
  color: white;
}
.sc:hover {
  background-color: #2087d0d2 !important;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title1 {
  width: 450px;
  height: 108px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin: 22px 0 0 30px;
  display: flex;

  .img {
    margin-left: 24px;
    margin-top: 30px;
  }

  .text3 {
    margin-left: 20px;
    margin-top: 32px;

    .text4 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .text5 {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 8px;
      margin-top: 11px;
    }
  }
}

.tit {
  margin-left: 20px;
}

.title2 {
  width: 1860px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin-left: 30px;
  margin-top: 20px;
  padding-top: 30px;
  .text6 {
    display: flex;
    margin-left: 30px;
    justify-content: space-between;

    .text7 {
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }

    .bt {
      width: 208px;
      height: 48px;
      background: #2087d0;
      border-radius: 4px;
      border: 1px #2087d0 solid;
      margin-right: 30px;
      margin-top: -10px;
      color: #fff;
    }
  }
}
.bt:hover {
  background: #2087d0a8;
}

.line {
  width: 1860px;
  height: 1px;
  background: #d8d8d8;
  border-radius: 1px;
  margin-top: 15px;
}

.title3 {
  justify-content: space-between;
  margin-top: 16px;

  .btt {
    width: 80px;
    height: 42px;
    background: #2087d0;
    border-radius: 4px;
    border: #2087d0;
  }
  .btt:hover {
    background: #2087d0cc !important;
    border: #2087d0cc !important;
  }
  .btt1:hover {
    color: #ffffff !important;
  }

  .input {
    width: 286px;
  }
}

.title4 {
  display: flex;
  margin: 20px 0;

  .text8 {
    margin-left: 30px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-top: 10px;
    font-weight: 800;
  }

  .bt {
    margin-left: 23px;
    width: 160px;
    height: 42px;
    background: #2087d0;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
  }

  .bt1 {
    margin-left: 16px;
    border: 1px #2087d0 solid;
    color: #fff;
    font-weight: 500;
  }

  .bt:hover {
    background: #2087d0d0 !important;
    border: 1px #2087d0d0 solid !important;
  }
  .bt1:hover {
    background: #2087d0d0 !important;
    border: 1px #2087d0d0 solid !important;
  }
}

.title5 {
  background-color: #f5f5f5;
  padding: 0 30px;
  height: 1355px;
  background: #f5f5f5;
  .title6 {
    background-color: #fff;
    padding: 30px;

    .text {
      height: 48px;
      background: #e7f3fb;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      .text1 {
        line-height: 48px;
        margin-left: 20px;
      }

      .text2 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #2087d0;
        line-height: 48px;
        margin-right: 30px;
        background-color: #e7f3fb;
        border: 1px #e7f3fb solid;
      }
    }
  }
}
.title7 {
  .text {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
  .text1 {
    width: 596px;
    height: 124px;
    background: #ffffff;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    padding: 30px 84px 30px 30px;
    .text2 {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
    .text3 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin-top: 15px;
    }
    .text4 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #f4b259;
      margin-top: 17px;
    }
  }
}
.bttt {
  width: 80px;
  height: 36px;
  background: #2087d0;
  border-radius: 4px;
  border: 1px #2087d0 solid;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  margin-left: 20px;
}
.bttt {
  background: #2087d0cc !important;
  border: 1px #2087d0cc solid !important;
}
.title8 {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: #333333;
  margin-top: 24px;
  .text {
    color: #999999;
  }
}

.title9 {
  .line {
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    border-radius: 1px;
  }
  .title10 {
    width: 1062px;
    height: 664px;
    background: #ffffff;
    border: 1px solid #ebecee;
    border-radius: 4px;
    margin: 20px 30px;
    padding: 0 24px;
    .title11 {
      .title12 {
        .input {
          width: 242px;
          height: 36px;
          background: #ffffff;
          border-radius: 4px;
        }
        .bt {
          width: 80px;
          height: 36px;
          background: #2087d0;
          border-radius: 4px;
          border: 1px #2087d0 solid;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
          line-height: 6px;
        }
      }
    }
  }
}
.title22 {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.title14 {
  width: 122px;
  height: 664px;
  background: #ffffff;
  border: 1px solid #ebecee;
  border-radius: 4px;
  margin-top: 30px;
}
</style>
